import React from 'react';
import {Dimensions, StyleSheet, View} from 'react-native';
import ScrollableTabView from 'react-native-scrollable-tab-view';
import ActiveScrollTab from './ActiveScrollTab';
import PropTypes from "prop-types";

const WIN_WIDTH = Dimensions.get('window').width;

//
class CustomTabPage extends React.Component {

  static propTypes = {
    titles: PropTypes.array,
    initialPage: PropTypes.number,
    tabBar: PropTypes.func,
    tabBarStyle: PropTypes.object,
    /**
     * 是否将tab的宽度设为width/count
     */
    equalTabWidth: PropTypes.bool,
    /**
     * 当equalTabWidth位false时使用
     */
    tabStyle: PropTypes.object,
    lineWidth: PropTypes.number,
    prerenderingSiblingsNumber: PropTypes.number,
    tintColor: PropTypes.string,
    color: PropTypes.string,
    pageAtIndex: PropTypes.func,
    onChangeTab: PropTypes.func,
  };

  static defaultProps = {
    initialPage: 0,
    equalTabWidth: true,
    tabStyle: null,
    lineWidth: -1,
    prerenderingSiblingsNumber: 1,
    tintColor: '#4886FF',
    color: '#444',
  };

  constructor(props) {
    super(props);
    this.state = {currentPage: 0};
    this.tabArr = this.props.titles.map(value => {
      return {columnName: value};
    });
  }

  componentDidMount() {
    const {navigation} = this.props;
  }

  showPage(name, params = null) {
    this.props.navigation.push(name, params);
  }

  render() {
    const width = (this.props.tabBarStyle && this.props.tabBarStyle.width) ? this.props.tabBarStyle.width : WIN_WIDTH;
    let tabStyle = {width: width / this.props.titles.length, paddingLeft: 0, paddingRight: 0};
    if (!this.props.equalTabWidth) {
      tabStyle = this.props.tabStyle;
    }
    return (<View
      style={{flex: 1, alignItems: 'stretch'}}
    >
      <ScrollableTabView
        ref={'tabView'}
        renderTabBar={() => <ActiveScrollTab
          style={[{
            width: width,
            height: 45,
            backgroundColor: 'white',
            borderBottomColor: '#E5E5E5',
            borderBottomWidth: 1,
          }, this.props.tabBarStyle]}
          tabsContainerStyle={{justifyContent: this.props.equalTabWidth ? 'space-around' : 'flex-start', width: this.props.equalTabWidth ? width : undefined}}
          tabStyle={tabStyle}
          lineWidth={this.props.lineWidth}
        />}
        tabBarUnderlineStyle={{
          height: 3,
          backgroundColor: this.props.tintColor,
          borderRadius:1.5
        }}
        tabBarInactiveTextColor={this.props.color}
        tabBarActiveTextColor={this.props.tintColor}
        tabBarTextStyle={{fontSize: 15}}
        locked={false}
        initialPage={this.props.initialPage}
        prerenderingSiblingsNumber={this.props.prerenderingSiblingsNumber}
        contentProps={{bounces: false}}
        onChangeTab={({i})=>this.props.onChangeTab && this.props.onChangeTab(i)}
      >
        {
          this.tabArr.map((item, index) => {
            return (
              <View tabLabel={item.columnName} key={index} style={{flex: 1, alignItems: 'stretch'}}>
                {this.props.pageAtIndex(index)}
              </View>
            );
          })
        }
      </ScrollableTabView>
    </View>)
      ;
  }
}

const styles = StyleSheet.create({});
export default CustomTabPage;
